{extend name='layout:app'}

{block name='css'}
    <link rel="stylesheet" href="__STATIC__/css/zhifu.css">
    <link rel="stylesheet" href="__STATIC__/css/send-by3.css">
    <style>
        .ftc_wzsf{
            top: unset;
            bottom: 0;
        }
        .active-info{
            color: #646464;
        }
    </style>
{/block}

{block name='content'}
<div id="app" v-loading="loading">
    <div class="nav">
        <i class="el-icon-arrow-left icon_left" @click="back"></i>
        <div>2元寄件</div>
        <i class="iconfont icon-home icon_right" @click="home"></i>
    </div>
    <div class="top-banner">
        <div class="font-cont"><span>2</span>元寄件</div>
        <img src="__STATIC__/imgs/item-icon_003.png" alt="">
    </div>
    <div class="yizhan-info">
        <div class="title"  style="    padding: 13px 0 6px 20px;"><i class="iconfont icon-lbs"></i> 驿站地址:学府大道278号11栋2层</div>
        <div class="info-item" @click="open">
            <div class="name">
                <span><img src="__STATIC__/imgs/delivery.png" alt="" style="width: 21px"> 选择快递</span>
                <i class="el-icon-arrow-right"></i>
            </div>
            <div class="active-info express" style="color: #646464;font-size: 16px;">中通快递</div>
        </div>
        <div class="info-item" @click="chooseSender">
            <div class="name">
                <span><img src="__STATIC__/imgs/sender.png" alt="" style="width: 25px">寄件人信息</span>
                <i class="el-icon-arrow-right"></i>
            </div>
            <div id="senderInfo" class="active-info" style="color: #646464;font-size: 16px;"><!--吴某某   15885220135   成都市青羊区宽窄巷子9号--></div>
        </div>
        <div class="info-item" @click="chooseReceiver">
            <div class="name">
                <span><img src="__STATIC__/imgs/receiver.png" alt="" style="width: 25px">收件人信息</span>
                <i class="el-icon-arrow-right"></i>
            </div>
            <div id="receiverInfo" class="active-info" style="color: #646464;font-size: 16px;"><!--吴某某   15885220135   成都市青羊区宽窄巷子9号--></div>
        </div>
    </div>
    <div class="info-tips" v-show="canOrder === false">未满足2元寄件条件，<a href="/help">查看详情</a></div>

    <transition name="el-fade-in">
        <div id="modal" v-show="chooseExpress" v-cloak>
            <div class="express-list">
                <div class="name" v-for="item in expressList" @click="changeExpress(item)">{{item}}</div>
            </div>
        </div>
    </transition>
    <div class="btn-area">
        <div class="order">
            <el-button type="primary" @click="order"
                       :style="canOrder === false ? 'background:#DCDFE6;border-color:#DCDFE6' : ''">下单</el-button>
        </div>
    </div>

    <div class="pay" hidden>
        <div class="pay-way">
            <i class="el-icon-arrow-down" @click="hidePay"></i>
            <div class="wechat" @click="choosePay($event)">
                <i class="iconfont icon-wechat"></i>
                <span class="txt">微信支付</span>
                <span class="circle-btn active-bg"></span>
            </div>
            <div class="remain" @click="choosePay($event)">
                <i class="iconfont icon-pay-order"></i>
                <span class="txt">余额支付<span style="font-size: 15px">({$balance} ￥)</span></span>
                <span class="circle-btn"></span>
            </div>
        </div>
        <div class="go-pay">
            <div class="pay-money">
                <span>应付款 <span class="red-txt">¥<span class="money">{{codeCount}}</span></span></span>
            </div>
            <div class="btn-pay" @click="goPay" style="background: rgb(180, 6, 6);color: rgb(255, 255, 255);">去付款</div>
        </div>
    </div>

    <div id="modal2"  v-loading="loading2"
         element-loading-text="正在加载"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0,0,0,.1)"></div>
    <!--余额支付付款页面-->
    <div id="remaining">
        <div class="ftc_wzsf">
            <div class="srzfmm_box">
                <div class="qsrzfmm_bt clear_wl">
                    <img src="__IMG__/images/xx_03.jpg" class="tx close fl" @click="payUIClose">
                    <img src="__IMG__/images/jftc_03.png" class="tx fl">
                    <span class="fl">请输入支付密码</span></div>
                <div class="zfmmxx_shop">
                    <div class="mz">2元寄件</div>
                    <div class="zhifu_price">￥{{codeCount}}</div></div>
                <ul class="mm_box" @click="numberShow">
                    <li></li><li></li><li></li><li></li><li></li><li></li>
                </ul>
            </div>
            <div class="numb_box">
                <div class="xiaq_tb" @click="numberHide">
                    <img src="__IMG__/images/jftc_14.jpg" height="10" style="width:40px;"></div>
                <ul class="nub_ggg" @click="pwdInput">
                    <li><a href="javascript:void(0);" class="zf_num">1</a></li>
                    <li><a href="javascript:void(0);" class="zj_x zf_num">2</a></li>
                    <li><a href="javascript:void(0);" class="zf_num">3</a></li>
                    <li><a href="javascript:void(0);" class="zf_num">4</a></li>
                    <li><a href="javascript:void(0);" class="zj_x zf_num">5</a></li>
                    <li><a href="javascript:void(0);" class="zf_num">6</a></li>
                    <li><a href="javascript:void(0);" class="zf_num">7</a></li>
                    <li><a href="javascript:void(0);" class="zj_x zf_num">8</a></li>
                    <li><a href="javascript:void(0);" class="zf_num">9</a></li>
                    <li><a href="javascript:void(0);" class="zf_empty">清空</a></li>
                    <li><a href="javascript:void(0);" class="zj_x zf_num">0</a></li>
                    <li><a href="javascript:void(0);" class="zf_del">删除</a></li>
                </ul>
            </div>
            <div class="hbbj"></div>
        </div>
    </div>
</div>
{/block}
{block name='footer'}{/block}
{block name='js'}
<script src="/static/layer/layer.js"></script>
<script>
            window.onload = function () {
        var _i = 0;
        var that;
        //出现浮动层
        $(".ljzf_but").click(function(){
            $(".ftc_wzsf").show();
        });
        //关闭浮动
        $(".close").click(function(){
            $(".ftc_wzsf").hide();
            $(".mm_box li").removeClass("mmdd");
            $(".mm_box li").attr("data","");
            _i = 0;
        });
        //取消支付
        $('.gofh').click(function () {
            // $('#remaining').css({height:0,transformOrigin:'bottom',transition:'all .3s ease'});
            $('#remaining').slideUp();
        })
        //数字显示隐藏
        $(".xiaq_tb").click(function(){
            $(".numb_box").slideUp(500);
        });
        $(".mm_box").click(function(){
            $(".numb_box").slideDown(500);
        });

        new Vue({
            el:'#app',
            data: {
                loading: true,
                loading2: false,
                expressList: ['中通','申通','韵达','圆通','汇通','顺丰','邮政'],
                chooseExpress: false,
                addrList: false , //寄件人地址
                addrList2: false, //收件人地址
                canOrder: {$canOrder},
                codeCount: '2.00',
                payWay: 0,
                paypwdInput: '',
                orderLock: true
            },
            created() {
                that = this;
                if(that.canOrder == false){
                    //页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕
                    layer.ready(function () {
                        layer.alert("您的积分不足5，无法寄件");
                    });
                }
                /*var _sendInfo = JSON.parse(localStorage.getItem('_SendAddr')),
                    _ReceiveInfo = JSON.parse(localStorage.getItem('_ReceiveAddr'))
                if(_sendInfo) {
                    $('#senderInfo').html(`${_sendInfo.name} ${_sendInfo.phone} ${_sendInfo.addr}`)
                    this.addrList = _sendInfo
                }
                if(_ReceiveInfo) {
                    $('#receiverInfo').html(`${_ReceiveInfo.name} ${_ReceiveInfo.phone} ${_ReceiveInfo.addr}`)
                    this.addrList2 = _ReceiveInfo
                }*/
                $.when($.get('/index/person/getaddr?type=0'),$.get('/index/person/getaddr?type=1'))
                    .done((data1, data2) => {
                        for(item of data1[0].data) {
                            if(item.addr_default === 1) {
                                $('#senderInfo').html(`${item.addr_name} ${item.addr_phone} ${item.addr_province} ${item.addr_city} ${item.addr_area} ${item.addr_detail}`)
                                that.addrList = true
                            }
                        }
                        for(item of data2[0].data) {
                            if(item.addr_default === 1) {
                                $('#receiverInfo').html(`${item.addr_name} ${item.addr_phone} ${item.addr_province} ${item.addr_city} ${item.addr_area} ${item.addr_detail}`)
                                that.addrList2 = true
                            }
                        }
                        that.loading = false
                    })
            },
            methods: {
                back() {
                    window.history.go(-1)
                },
                home() {
                    location.href = '/'
                },
                open() {
                    this.chooseExpress = true
                },
                changeExpress(item) { //选择物流
                    this.chooseExpress = false
                    $('.express').html(item+'快递')
                },
                chooseSender(e) {
                    sessionStorage.setItem('clickType', 0)
                    if(!this.addrList) {
                        location.href = '/index/person/addNewAddr'
                        return
                    }
                    location.href = '/index/person/address.html'
                },
                chooseReceiver(e) {
                    sessionStorage.setItem('clickType', 1)
                    if(!this.addrList2) {
                        location.href = '/index/person/addNewAddr'
                        return
                    }
                    location.href = '/index/person/address.html'
                },
                choosePay(e) {
                    if($(e.currentTarget).find('.circle-btn').hasClass('active-bg')) {
                        $(e.currentTarget).siblings().find('.circle-btn').removeClass('active-bg')
                    }else {
                        $(e.currentTarget).find('.circle-btn').addClass('active-bg')
                        $(e.currentTarget).siblings().find('.circle-btn').removeClass('active-bg')
                    }
                    if($(e.currentTarget).hasClass('wechat')) {
                        this.payWay = 0
                    }else {
                        this.payWay = 1
                    }
                },
                changeTwoDecimal_f(x) { //数字保留两位小数
                    var f_x = parseFloat(x);
                    if (isNaN(f_x)) {
                        alert('function:changeTwoDecimal->parameter error');
                        return false;
                    }
                    var f_x = Math.round(x * 100) / 100; //保证小数位不大于2位
                    var s_x = f_x.toString();
                    var pos_decimal = s_x.indexOf('.');
                    if (pos_decimal < 0) {
                        pos_decimal = s_x.length;
                        s_x += '.';
                    }
                    while (s_x.length <= pos_decimal + 2) {
                        s_x += '0';
                    }
                    return s_x;
                },
                goPay() {
                    $('#modal2').show()
                    that.loading2 = true
                    setTimeout(() => {
                        $('#modal2').hide()
                        that.loading2 = false

                        //describe商品名称 orderNum订单号 id商品id num数量
                        const orderNum = 's3_' + that.createOrderNum()
                        if(this.payWay === 0) {
                            // if (navigator.userAgent.indexOf('MicroMessenger') != -1 && navigator.userAgent.indexOf('Mobile') != -1) {
                                $.post('/index/services/newsendorder/wx/yes',{
                                    describe: '2元寄件',
                                    orderNum: orderNum,
                                },function (res) {
                                    if(res) {
                                        if(typeof WeixinJSBridge == "undefined"){
                                            if( document.addEventListener ){
                                                document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady, false);
                                            }else if (document.attachEvent){
                                                document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady);
                                                document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady);
                                            }
                                        }else {
                                            that.onBridgeReady(res.data, orderNum);
                                        }
                                    }

                                },'json')

                                return
                            // }
                        }else {
                            $('#remaining').slideDown(500);
                            $('.ftc_wzsf').show();
                        }

                    }, 500)
                },
                onBridgeReady(paramNeed, orderNum) {
                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', paramNeed,
                        function(res){
                            if(res.err_msg == "get_brand_wcpay_request:ok" ){
                                // 使用以上方式判断前端返回,微信团队郑重提示：
                                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                $.post("/index/payment/paysuccess", {
                                    orderNum: orderNum,
                                }, function (resStatus) {
                                    if(resStatus.code === 0) {
                                        that.orderLock = false
                                        that.nowOrder(orderNum)
                                        // window.location.href = '/index/person/myorder'
                                    }
                                },'json')
                            }
                        });
                },
                pwdInput(e) {
                    if(($(e.target).text()) == '删除') {
                        if(_i>0){
                            _i--
                            $(".mm_box li").eq(_i).removeClass("mmdd");
                            $(".mm_box li").eq(_i).attr("data","");
                            that.paypwdInput = that.paypwdInput.substr(0,_i)
                        }
                        return
                    }
                    if(($(e.target).text()) == '清空') {
                        $(".mm_box li").removeClass("mmdd");
                        $(".mm_box li").attr("data","");
                        _i = 0;
                        that.paypwdInput = ''
                        return
                    }
                    if(_i<6){
                        $(".mm_box li").eq(_i).addClass("mmdd");
                        $(".mm_box li").eq(_i).attr("data",$(e.target).text());
                        that.paypwdInput += $(".mm_box li").eq(_i).attr("data");
                        _i++
                        if (_i==6) {
                            var orderNum = 'S2_' + this.createOrderNum()
                            setTimeout(function(){
                                // console.log(that.paypwdInput);
                                $.post('/index/services/newsendorder',{
                                    describe: '2元寄件',
                                    orderNum: orderNum,
                                    paypwd: that.paypwdInput
                                },function (res) {
                                    layer.msg('', {
                                        icon: 16
                                        ,shade: 0.4,
                                        time: 300
                                    });
                                    $('.layui-layer-dialog .layui-layer-padding')
                                        .css({padding:'20px',textAlign:'center'})
                                    $('.layui-layer-dialog .layui-layer-content .layui-layer-ico')
                                        .css({position: 'unset'})
                                    $('.ftc_wzsf').slideUp(200)

                                    if(res.code === 0) {
                                        that.orderLock = false
                                        that.nowOrder(orderNum)
                                    }else {
                                        that.paypwdInput = ''
                                        $(".mm_box li").removeClass("mmdd");
                                        _i = 0;
                                        that.$message({
                                            message: '密码错误!',
                                            type: 'error',
                                            center: true,
                                            duration: 1000
                                        });
                                    }
                                },'json')
                            },100);
                        };
                    }
                },
                createOrderNum() {
                    var t = new Date(),
                        y = t.getFullYear(),
                        mon = t.getMonth() + 1,
                        d = t.getDate(),
                        h = t.getHours(),
                        min = t.getMinutes(),
                        s = t.getSeconds()

                    if(mon<10) mon = '0'+mon
                    if(d<10) d = '0'+d
                    if(h<10) h = '0'+h
                    if(min<10) min = '0'+min
                    if(s<10) s = '0'+s

                    const orderNum = String(y)+String(mon)+String(d)+String(h)+String(min)+String(s)+that.randomNum(4)
                    return orderNum;
                },
                randomNum(n) {
                    var randomNum = ''
                    for(var i=0;i<n;i++){
                        randomNum += Math.floor(Math.random()*10)
                    }
                    return randomNum
                },
                numberShow() {
                    $(".numb_box").slideDown(500);
                },
                numberHide() {
                    $(".numb_box").slideUp(500);
                },
                payUIClose() {
                    $(".ftc_wzsf").hide();
                    $(".mm_box li").removeClass("mmdd");
                    $(".mm_box li").attr("data","");
                    _i = 0;
                },
                hidePay() {
                    $('#remaining').slideUp(500);
                    $('.ftc_wzsf').hide();
                    $('.pay').slideUp(500);
                },
                order() {
                    if(!this.canOrder) return
                    if(!$('.express').html() || !$('#senderInfo').html() || !$('#receiverInfo').html()) {
                        alert('请完善信息！')
                        return
                    }
                    $('.pay').slideDown(500)
                },
                nowOrder(orderNum) {
                    if(!this.orderLock) {
                        $.post('/index/services/sendOrderBy3',
                            {
                                express: $('.express').html(),
                                sender_info: $('#senderInfo').html(),
                                receiver_info: $('#receiverInfo').html(),
                                send_way: 0,
                                orderNum: orderNum
                            },
                            function (res) {
                                if(res.code === 0) {
                                    window.location.href = '/index/person/myorder'
                                }
                            },
                            'json'
                        )
                    }
                }
            }
        });
    }
</script>
{/block}